<template>
  <div class="dataBox3">
    <div class="chartsBox1">
      <ul class="chartsBtn">
        <li
          v-for="(data,i) in chartsText"
          :key="i"
          @click="addClass(i,data.id)"
          :class="{ active:i==current}"
          :title="data.name"
        >{{data.name}}</li>
      </ul>
      <div class="chartsBox-in">
        <dv-charts :option="option" v-if="showChart" />
      </div>
    </div>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "dataBox3",
  data() {
    return {
      current: 0,
      chartsText: [],
      option: {},
      showChart: true
    };
  },
  methods: {
    //更改数据
    switchData(id) {
      // let that = this
      this.axios
        .get(apis.queryThirdViewAndForward, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: { id: id }
        })
        .then(res => {
          console.log(res.data.result);
          if (
            res.data.result.date != null
          ) {
            //只有数据大于3个的时候才用贝塞尔曲线
            const smooth = res.data.result.date.length >= 3;
            this.option = {
              grid: {
                left: "10%",
                right: "1%",
                top: "20%",
                bottom: "20%"
              },
              legend: {
                orient: "horizontal",
                right: 2,
                top: 20,
                textStyle: {
                  fontSize: 12,
                  fill: "#fff"
                },
                data: [
                  { name: "访问", color: "#3A5FFB" },
                  { name: "转发", color: "#54EBEF" }
                ]
              },

              xAxis: {
                data: res.data.result.date,
                axisLabel: {
                  style: {
                    fill: "#8A9ECF",
                    fontSize: 10
                  }
                },
                axisLine: {
                  style: {
                    stroke: "#1E61A1",
                    lineWidth: 1
                  }
                },
                splitLine: {
                  show: true,
                  style: {
                    stroke: "#1E61A1",
                    lineWidth: 1
                  }
                }
              },
              yAxis: {
                data: "value",
                min: 0,
                axisLabel: {
                  style: {
                    fill: "#8A9ECF",
                    fontSize: 10
                  }
                },
                axisLine: {
                  style: {
                    stroke: "#1E61A1",
                    lineWidth: 1
                  }
                },
                splitLine: {
                  show: true,
                  style: {
                    stroke: "#1E61A1",
                    lineWidth: 1
                  }
                }
              },

              series: [
                {
                  name: "访问",
                  // data: res.data.result.view,
                  data: res.data.result.view,
                  type: "line",
                  smooth: smooth,
                  lineArea: {
                    show: true,
                    gradient: ["#3A5FFB", "#051D58"]
                  }
                },
                {
                  name: "转发",
                  data: res.data.result.forward,
                  type: "line",
                  smooth: smooth,
                  lineArea: {
                    show: true,
                    gradient: ["#54EBEF", "#164D7B"]
                  }
                }
              ]
            };
            this.showChart = true;
          } else {
            this.showChart = false;
          }
        })
        .catch(function(error) {
          alert(error);
        });
    },

    createData() {
      //获取第三方平台id 和名称
      this.axios
        .get(apis.queryThirdIdAndName, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          //此处要使用箭头函数，this指向才正确
          this.chartsText = res.data.result;
          // console.log(this.chartsText)
          //初始化获取第一条数据
          this.switchData(this.chartsText[0].id);
        })
        .catch(function(error) {
          alert(error);
        });
    },
    addClass(i, id) {
      this.current = i;
      this.switchData(id);
    }
  },
  mounted() {
    this.createData();
  }
};
</script>
<style lang="less">
.dataBox3 {
  padding: 15px 17px;
  width: 100%;
  height: 304px;
  background: url(../assets/img/border2-3.png) no-repeat center center / 100%
    100%;
}
.chartsBtn {
  display: flex;
  align-items: center;
  top: 14px;
  padding-left: 15px;
  position: absolute;
  li {
    width: 62px;
    height: 30px;
    font-size: 10px;
    text-align: center;
    margin-right: 10px;
    line-height: 30px;
    background-color: #1d4a8b;
    border: 1px solid #1d4a8b;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 3px;
  }
  .active {
    background-color: #2464a1;
    border: 1px solid #3eb0cd;
  }
}
.chartsBox-in {
  width: 100%;
  height: 216px;
}
.chartsBox1 {
  width: 424px;
  margin: 30px auto 0;
  height: 229px;
  position: relative;
  padding-top: 20px;
}
</style>
